<template>
  <div>
    <HelloWorld msg="Hello Vue 3.0 + Vite" />
    <div>pageX: {{position.x}}</div>
    <div>pageY: {{position.y}}</div>
    <div>calc:{{calcNum}}</div>
    <div>time:{{time}}</div>
  </div>
</template>

<script>
import { computed, reactive, ref, unref, watch, watchEffect } from "vue";
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
  setup() {
    const position = reactive({});

    window.addEventListener("mousemove", (e) => {
      position.x = e.pageX;
      position.y = e.pageY;
    });

    const calcNum = computed(() => {
      return position.x + position.y;
    });

    //ref 基础的数据类型 包装成对象 wrap
    const time = ref(0);
    setInterval(() => {
      time.value = Date.now();
    }, 1000);

    watch(time, (val, prev) => {
      console.log("watch:", val, prev);
    });

    //副作用（就是数据变化所作出的响应）
    watchEffect(() => {
      console.log("watchEffect time", time.value, unref(time));
    });

    return { position, calcNum, time };
  },
};
</script>
